<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标行为坐标</title>
</head>
<style type="text/css">
  body {
    margin: 0;
  }

  .box {
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: blanchedalmond;
  }

  .test{
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<body>
  <div class="box">

  </div>

  <div class="test">
    <input type="text" id="num1">
    <input type="text" id="num2">
    <div class="btn-group">
      <button data-sign="plus">+</button>
      <button data-sign="minus">-</button>
      <button data-sign="mul">*</button>
      <button data-sign="div">/</button>
    </div>
    
  </div>
</body>
<script src="./js/utils.js"></script>
<script type="text/javascript">
  document.onclick = function (e) {
    var e = e || window.event;

    /**
     * 鼠标行为 -> 坐标系
     * clientX/Y  鼠标为止相对与当前可视距离的坐标
     *            (不包括滚动条的距离)
     * layerX/Y   同pageX/Y相同 IE11以下同clientX/Y
     * screenX/Y  鼠标位置相对于屏幕的坐标
     * x/y  同clientX/Y相同 FF不支持(火狐不支持)
     * pageX/PageY  鼠标位置对于当前文档的坐标(包含滚动条的距离)
     *              IE9以下不支持(Jquery)
     * offsetX/Y  鼠标位置相对于块级元素的坐标
     *            (包括边框，safari不包括边框)
     * */
    // console.log(pagePos(e).Y, e.pageY);
  }

  // 获取鼠标位于当前文档的位置
  function pagePos(e) {
    var sLeft = getScrollOffset().left,
      sTop = getScrollOffset().top,
      cLeft = document.documentElement.clientLeft || 0,
      cTop = document.documentElement.clidenTop || 0;

    return {
      X: e.clientX + sLeft - cLeft,
      Y: e.clientY + sTop - cTop
    }
  }

  var box = document.getElementsByTagName('div')[0],
    x,
    y;
  // 跟随鼠标移动
  // document.onmousemove = function(e){
  //   var e = e || window.event,
  //       page = pagePos(e);
  //   box.style.left = page.X + "px";
  //   box.style.top = page.Y + "px";
  // }


  // 拖拽移动的基本方法鼠标按下
  // box.onmousedown = function(e){
  //   var e = e || window.event;
  //   x = pagePos(e).X - getStyle(box, "left");
  //   y = pagePos(e).Y - getStyle(box, "top");
  //   // console.log(x, y);

  //   // 鼠标移动
  //   document.onmousemove = function(e){
  //     var e = e || window.event;
  //     box.style.left = pagePos(e).X - x + "px";
  //     box.style.top = pagePos(e).Y - y + "px";
  //   }

  //   // 鼠标松开
  //   document.onmouseup = function(e){
  //     var e = e || window.e;
  //     this.onmousemove = null;
  //     this.onmouseup = null;
  //   }
  // }


  // 对象拖拽函数
  function elemDrag(elem) {
    var x, y;
    addEvent(elem, 'mousedown', function (e) {
      var e = e || windwo.event;

      x = pagePos(e).X - getStyle(elem, 'left');
      y = pagePos(e).Y - getStyle(elem, "top");

      addEvent(document, 'mousemove', mouseMove);
      addEvent(document, 'mouseup', mouseUp);
    });

    function mouseMove(e) {
      var e = e || window.event,
        oLeft = pagePos(e).X - x,
        oTop = pagePos(e).Y - y,
        wWidth = window.innerWidth,
        wHeihgt = window.innerHeight,
        tWidth = getStyle(elem, 'width');
      tHeight = getStyle(elem, 'height');
      // elem.style.left = pagePos(e).X + 'px';
      // elem.style.top = pagePos(e).Y + 'px';
      if (oLeft < 0 && oTop < 0) {
        oLeft = 0;
        oTop = 0;
      } else if (oLeft + tWidth > wWidth && oTop + tHeight > wHeihgt) {
        oLeft = wWidth - tWidth;
        oTop = wHeihgt - tHeight;
      } else if (oTop < 0 && oLeft + tWidth > wWidth) {
        oTop = 0;
        oLeft = wWidth - tWidth;
      } else if (oLeft < 0 && oTop + tHeight > wHeihgt) {
        oLeft = 0;
        oTop = wHeihgt - tHeight;
      } else if (oTop < 0) {
        oTop = 0;
      } else if (oLeft < 0) {
        oLeft = 0;
      } else if (oLeft + tWidth > wWidth) {
        oLeft = wWidth - tWidth;
      } else if (oTop + tHeight > wHeihgt) {
        oTop = wHeihgt - tHeight;
      }
      elem.style.left = oLeft + 'px';
      elem.style.top = oTop + 'px';

      cancelBubble(e);
      preventDefaultEvent(e);
    }

    function mouseUp(e) {
      var e = e || window.event;
      removeEvent(document, 'mousemove', mouseMove);
      removeEvent(document, 'mouseUp', mouseUp);
    }
  }

  elemDrag(box);


  ;(function(){
    var Test = function(opt){
      this.num1 = opt.num1;
      this.num2 = opt.num2;
      this.btnGroup = opt.btnGroup;
    }

    Test.prototype = {
      init: function(){
        this.bindEvent();
      },

      bindEvent: function(){
        var btns = this.btnGroup,
            _self = this;
        addEvent(btns, 'click', function(e){
          _self.compute.call(_self, e);
        })
      },

      compute: function(e){
        var e = e || window.event,
            tar = e.target || e.srcElement,
            val1 = parseInt(this.num1.value),
            val2 = parseInt(this.num2.value),
            btns = this.btnGroup,
            sign;
        sign = tar.getAttribute('data-sign');

        switch (sign) {
          case 'plus':
            alert(val1 + val2);
            break;
          case 'minus':
            alert(val1 - val2);
            break;
          case 'mul':
            alert(val1 * val2);
            break;
          case 'div':
            alert(val1 / val2);
            break;
          default:

        }
      } 
    }

    window.Test = Test;
  })()

  
  new Test({
    num1: document.getElementById("num1"),
    num2: document.getElementById("num2"),
    btnGroup: document.getElementsByClassName("btn-group")[0],
  }).init()
</script>

</html>